<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-1.8.1.min.js"></script>
    <script>
        $(function () {
            //创建一个元素
            var newNode = $("<li style='color:red;'>拼多多</li>")

            //在父元素内
            //在某个元素内的后面追加新节点
            //$(".list").append(newNode);

            //将新节点添加到某个元素内的后面
            //newNode.appendTo($(".list"));

            //在某个元素内的前面追加新节点
            //$(".list").prepend(newNode);

            //将新节点添加到某个元素内的前面
            // newNode.prependTo($(".list"));


            //在元素外部
            //在某元素的前面添加节点（外部）
            //$(".list").before("<p>啦啦啦啦</p>")

            //将节点添加到某元素的前面（外部）
            //newNode.insertBefore($(".list"));


            //在某元素后面添加节点（外部）
            // $(".list").after("<p>啦啦啦啦</p>")

            //将节点添加到某元素的后面（外部）
            // newNode.insertAfter($(".list"));


            //替换节点
            //将某节点换成新节点
            // $("li:eq(1)").replaceWith(newNode);

            //用新节点将某节点替换掉
            //newNode.replaceAll($("li:eq(0)"));


            //删除节点
            //$("li:eq(1)").remove();//移除节点
            // $("li:eq(1)").empty();//清空节点内容
            // $("li:eq(1)").detach();//和remove效果一样 但是效率比较低

            //克隆（复制）节点 true表示是否复制子元素及其事件
            var node = $("li:eq(0)").clone(true);
            $("li:eq(1)").replaceWith(node);



        });


    </script>
</head>

<body>

    <ul class="list">
        <li>阿里</li>
        <li>京东</li>
    </ul>

</body>

</html>